<template>
    <div class="FZ clearfix">
        <!--{{infoStudent}}-->
        <div v-for="val in infoStudentGrounp"
             class="grounp"
             :groupid="val.ID">
            <input type="text"
                   v-model="val.GroupName"
                   class="GroupName">
            <draggable :options="{group:'people'}"
                       @end="ModifyGroup()"
                       class="grounpCont">
                <div class="StuItem clearfix"
                     v-for="StuID in val.StuId.split(',')"
                     @dblclick="SetLeader(val.Leader,StuID)"
                     :stuid="StuID">
                    <div class="headWarp">
                        <img class="head"
                             :src="getStuHead(StuID)">
                        <el-badge v-if="isLeader(val.Leader,StuID)"
                                  :value="'组长'"
                                  class="Leader"
                                  :leaderid="val.Leader"></el-badge>
                    </div>
                    <span class="name">{{getStuName(StuID)}}</span>
                </div>
            </draggable>
        </div>
    </div>
</template>
<script type="text/ecmascript-6">
import { mapGetters, mapActions } from 'vuex'
import draggable from 'vuedraggable'
import store from '../store/'
import axios from 'axios'


export default {
    name: "",
    props: [],
    data() {
        return {

        }
    },
    computed: {
        ...mapGetters([
            'infoStudentGrounp',
            'infoStudent'
        ]),
        infoStudentGrounp: {
            get() {
                return this.$store.state.mutations.infoStudentGrounp
            },
            set(value) {
                this.$store.commit('upinfoStudentGrounp', value)
            }
        },
    },
    components: {
        draggable,
    },
    mounted() {
        var _this = this;
        $('.grounpCont').height(parseInt($('.grounpCont').height()) - 44)
    },
    methods: {
        isLeader(LeaderID, StuID) {
            if (LeaderID == StuID) {
                return true
            }
        },
        SetLeader(LeaderID, StuID) {
            var _this = this
            console.log(LeaderID, StuID)
            LeaderID = parseInt(StuID)
            console.log(LeaderID, StuID)
            console.log(_this.infoStudentGrounp[0])
        },
        ModifyGroup() {//修改分组的方法
            var _this = this
            setTimeout(function () {
                var loading = layer.load(2, {
                    shade: [0.1, '#fff']
                });
                var SendGroup = []
                for (let i = 0; i < _this.infoStudentGrounp.length; i++) {
                    SendGroup[i] = _this.infoStudentGrounp[i]
                }
                console.log('发送过去的数组：')
                console.log(SendGroup)
                for (let i = 0; i < SendGroup.length; i++) {
                    let newArr = []
                    for (let k = 0; k < $('.grounpCont').eq(i).find('.StuItem').length; k++) {
                        newArr.push($('.grounpCont').eq(i).find('.StuItem').eq(k).attr('stuid'))
                    }

                    SendGroup[i].Stuid = newArr.join(',')
                    console.log(SendGroup[i].Stuid)
                }
                setTimeout(function () {

                    axios({
                        method: "POST",
                        url: 'api/GroupInfo/UpdateGroupInfo' + '?sk=' + store.state.mutations.getToken,
                        data: SendGroup
                    }).then(function (res) {
                        console.log(res.data.data)//拿到分组信息
                        store.state.mutations.infoStudentGrounp = res.data.data
                        layer.msg('修改分组成功', { time: 400 })
                        layer.close(loading)
                    });
                }, 200)

            }, 100)

        },


        getStuHead(StuID) {
            var UserHead = ''
            $(store.state.mutations.infoStudent).each(function () {
                if (this.ID == StuID) {
                    UserHead = picSrc + this.Head
                }
            })
            return UserHead
        },
        getStuName(StuID) {
            var UserName = ''
            $(store.state.mutations.infoStudent).each(function () {
                if (this.ID == StuID) {
                    UserName = this.UserName
                }
            })
            return UserName
        }
    }
}
</script>
<style>
.grounpCont {
    min-height: 20px;
}
</style>
<style lang="scss" rel="stylesheet/scss">
.FZ {
    height: 100%;
    overflow: auto;
    display: flex;
    flex-wrap: wrap;
    .grounp {
        position: relative;
        min-height: 28%;
        width: 22%;
        background: #fff;
        margin: 10px;
        text-align: center;
        box-shadow: 0 0 5px rgba(0, 0, 0, .3);
        margin-top: 44px;
        input {
            position: absolute;
            top: -44px;
            left: 0;
            color: #333;
            height: 44px;
            line-height: 44px;
            display: block;
            margin: 0 auto;
            width: 100%;
            font-size: 20px;
            text-align: center;
            border: none;
            box-shadow: 0 0 5px rgba(0, 0, 0, .3);
            background: #204FC9;
            color: #fff;
        }
        .grounpCont {
            height: 100%;
            cursor: move;
            .StuItem {
                .headWarp {
                    float: left;
                    margin-left: 20px;
                    height: 40px;
                    width: 40px;
                    display: block;
                    border-radius: 50%;
                    padding: 5px;
                    position: relative;
                    .Leader {
                        position: absolute;
                        right: -20px;
                        top: 0;
                        z-index: 1;
                    }
                    img {
                        width: 100%;
                        height: 100%;
                        display: block;
                    }
                }
                .name {
                    float: right;
                    margin-right: 20px;
                    height: 50px;
                    line-height: 50px;
                    font-size: 16px;
                    color: #204FC9;
                }
            }
        }
    }
}
</style>